<script>
import NavigationBar from "../../components/navigationBar/navigationBar.vue";
import e from "../../res/www.a9a.cn";
import globalUtils from "../../res/www.a9a.cn";
import MescrollMixin from "../../uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollBody from "../../uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";

var r = uni.getStorageSync('COOK_U');
var app = getApp();
var n = true;

export default {
  name: "rankingList",
  computed: {
    globalUtils() {
      return globalUtils
    }
  },
  mixins: [MescrollMixin], // 使用mixin
  components: {MescrollBody, NavigationBar},
  data() {
    return {
      rankingList: [], // 榜单名称
      SHARE: {}, // 榜单图片
      backtop_flag_index: false, // 回到顶部
      current: 0, // 选择榜单
      currentId: 0, // 榜单ID
      currentItem: [], // 选择列表
      isSticky: false,
      color: '',
      nTitle: '排行榜', // 排行榜
      rgbcolor: '',
      upOption: {
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 8 //每页数据条数,默认10
        },
        textNoMore: '已全部加载完毕',
        toTop: {
          use: false, // 核心配置：禁用返回顶部按钮
          src: '', // 清空图标路径（可选，避免默认图标加载）
        },
        lazyLoad: {
          use: true,
        }
      },
    }
  },
  onLoad() {
    const that = this;
    app.globalData.get_config('_ZEAI').then(function (a) {
      that.setData({
        color: app.globalData._ZEAI.color,
        rgbcolor: e.c16_rgb(app.globalData._ZEAI.color),
      });
    });
  },
  onPageScroll: function (a) {
    a.scrollTop > 100
        ? this.setData({
          backtop_flag_index: true
        })
        : this.setData({
          backtop_flag_index: false,
        });
  },

  methods: {
    // 列表调用
    downCallback(mescroll) {
      mescroll.endSuccess();
      mescroll.resetUpScroll();
    },
    upCallback(mescroll) {
      this.init(mescroll)
    },
    // 获取数据
    init(mescroll) {
      const that = this;
      const data = {
        submitok: 'renqi',
        openid: (r = uni.getStorageSync('COOK_U')).openid,
        id: this.currentId,
        p: mescroll.num,
      };
      app.globalData.ajax({
        url: '/renqi.php',
        data: data,
        success: function (a) {
          if ('1' === a.flag) {
            that.setData({
              rankingList: a.KIND,
              SHARE: a.D,
              nTitle: a.D.title,
            });
            uni.setNavigationBarTitle({
              title: that.nTitle
            });
            if (mescroll.num === 1) {
              that.currentItem = a.LIST;
            } else {
              that.currentItem = that.currentItem.concat(a.LIST);
            }
            mescroll.endSuccess(a.LIST.length, a.LIST.length >= mescroll
                .size);

          } else {
            uni.showToast({
              title: a.msg,
              icon: 'none',
              mask: true
            });
          }
          uni.hideLoading();
          n = true;
        }
      });
    },
    // 切换排行榜
    onCut(item, i) {
      this.current = i;
      this.currentId = item.id;
      this.mescroll.resetUpScroll();
      if (this.backtop_flag_index) {
        this.mescroll.scrollTo(0, 300); // 300ms内平滑滚动到顶部
      }
    },
    // 回到顶部
    backtopFn: function (a) {
      this.mescroll.scrollTo(0, 300); // 300ms内平滑滚动到顶部
    },
  },
}
</script>

<template>
  <view class="rankingList">
    <navigationBar></navigationBar>
    <view v-if="SHARE.path_b" class="banner">
      <!--      aspectFit-->
      <image :src="SHARE.path_b" mode="widthFix"></image>
    </view>
    <view class="content">
      <view class="contentItemLeft stickyNav">
        <view v-for="(center,index) in rankingList" :key="center.id" :class="['item',{'catItem': index === current }]"
              @tap="onCut(center,index)">
          {{ center.title }}
        </view>
      </view>
      <view class="contentItemRight">
        <mescroll-body ref="mescrollRef" :up="upOption" @down="downCallback" @init="mescrollInit" @up="upCallback">
          <view class="rightItemList">
            <view v-for="(item,i) in currentItem" v-show="currentItem.length > 0" :key="item.id" class="rightItem">
              <view class="a">
                <view class="em">
                  <image :src="item.photo_b" class="m" mode="widthFix"></image>
                  <image v-if="item.grade > 1" class="vipj" mode="widthFix" src="/static/res/img/vipj.png"></image>
                </view>
                <view class="uinfo">
                  <view class="nik">
                    <view class="span">
                      <text class="h4">{{ item.nickname }}</text>
                      <image :src="item.grade_ico" class="ugrade2"></image>
                    </view>
                    <text class="font">{{ item.marrytime }}</text>
                  </view>
                  <view class="data">
                    <view class="span">
                      <text v-for="(item2, index2) in item.ageheighedupay" :key="index2" class="li">{{ item2 }}</text>
                    </view>
                    <view class="span">
                      <text class="i ico"></text>
                      {{ item.areatitle_str }}
                    </view>
                  </view>
                  <view class="about">{{ item.aboutus }}</view>
                </view>
                <view class="payrz">
                  <view class="RZBOX">
                    <text v-for="(item2, index2) in item.RZarr"
                          :key="index2" :class="'i ico ' + item2.F + ' ' + item2.ed + ' ' + item2.size"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </mescroll-body>
      </view>
    </view>
    <view v-if="backtop_flag_index" :style="'color:' + color" class="backtop fadeInUp" data-id="index" @tap="backtopFn">
      <text class="ico icon-backtop"></text>
      顶部
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "rankingList.scss";
</style>